import 'package:azring/common/styles/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui' as ui;

/// 固定的头部组件（包含标题和日周月切换）
/// 用于二级页面，确保标题和切换器在滚动时保持固定
class FixedHeaderWithTabs extends StatelessWidget {
  final String title;
  final int selectedIndex; // 0=日, 1=周, 2=月
  final Function(int) onTabChanged;
  final VoidCallback? onBack;
  final List<Widget>? actions; // 右侧操作按钮
  final bool showBackButton; // 是否显示返回按钮

  const FixedHeaderWithTabs({
    super.key,
    required this.title,
    required this.selectedIndex,
    required this.onTabChanged,
    this.onBack,
    this.actions,
    this.showBackButton = true, // 默认显示返回按钮
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colours.dark_gradient_top_left,
            Colours.dark_gradient_top_right,
          ],
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 标题栏
          _buildHeader(context),
          SizedBox(height: 12.h),
          // 日周月切换器
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: _buildTimeSelector(),
          ),
          SizedBox(height: 12.h),
        ],
      ),
    );
  }

  /// 构建头部标题栏
  Widget _buildHeader(BuildContext context) {
    return SizedBox(
      height: 48.h,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 中间标题 - 绝对居中
          Center(
            child: Text(
              title,
              style: TextStyle(
                fontSize: 18.sp,
                color: Colors.white,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
          // 左侧返回按钮（根据showBackButton控制显示）
          if (showBackButton)
            Positioned(
              left: 0,
              child: IconButton(
                onPressed: onBack ?? () => Navigator.of(context).pop(),
                icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
              ),
            ),
          // 右侧操作按钮
          if (actions != null && actions!.isNotEmpty)
            Positioned(
              right: 0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: actions!,
              ),
            ),
        ],
      ),
    );
  }

  /// 构建时段选择器
  Widget _buildTimeSelector() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(25.r),
      child: BackdropFilter(
        filter: ui.ImageFilter.blur(sigmaX: 6.3, sigmaY: 6.3),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.black.withValues(alpha: 0.4),
            borderRadius: BorderRadius.circular(25.r),
            border: Border.all(
              color: Colors.white.withValues(alpha: 0.12),
              width: 1,
            ),
          ),
          child: Row(
            children: [
              _buildTimeSelectorItem(
                  '日', selectedIndex == 0, () => onTabChanged(0)),
              _buildTimeSelectorItem(
                  '周', selectedIndex == 1, () => onTabChanged(1)),
              _buildTimeSelectorItem(
                  '月', selectedIndex == 2, () => onTabChanged(2)),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建时段选择器项目
  Widget _buildTimeSelectorItem(
      String text, bool isSelected, VoidCallback onTap) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: isSelected
            ? Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25.r),
                  color: Colors.transparent,
                  border: Border.all(
                    color: const Color.fromARGB(255, 247, 125, 12),
                    width: 1,
                  ),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(24.r),
                  child: BackdropFilter(
                    filter: ui.ImageFilter.blur(sigmaX: 9, sigmaY: 9),
                    child: Container(
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            const Color.fromARGB(255, 255, 43, 1)
                                .withValues(alpha: 0.3),
                            const Color(0xFFE33E10).withValues(alpha: 0.3),
                            const Color(0xFFE33E10).withValues(alpha: 0.3),
                          ],
                        ),
                      ),
                      child: Center(
                        child: Text(
                          text,
                          style: TextStyle(
                            fontSize: 17.sp,
                            fontWeight: FontWeight.w500,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              )
            : Container(
                padding: EdgeInsets.symmetric(vertical: 12.h),
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(25.r),
                ),
                child: Center(
                  child: Text(
                    text,
                    style: TextStyle(
                      fontSize: 17.sp,
                      fontWeight: FontWeight.w500,
                      color: Colors.grey[400],
                    ),
                  ),
                ),
              ),
      ),
    );
  }
}
